<template>
	<view>
		<view class="list">
			
			<view class="item" v-for="(item,key) in carts" :key="key">
				
				<image :src="item.checked?'/static/checked.png':'/static/uncheck.png'" mode="" class="check-icon" @click="checkCart(key)"></image>
				<image class="item-image" :src="item.thumb" mode="aspectFill"></image>
				<view class="item-info">
					<image src="../../../static/delete.png" mode="" style="width: 32upx;height: 32upx;position: absolute;right: 16upx;top: 16upx;" @click="deleteCart(key)"></image>
					<view class="item-title">
						<text>{{item.name}}</text>
						<text class="weight">
							{{item.weight}}g
						</text>
					</view>
					
					<view class="item-bottom">
						<text class="item-price">
							￥{{item.price}}
						</text>
						<number-box min=1 :value='item.count' :id="key" v-on:update="setCount"></number-box>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100upx;"></view>
		<view class="bottom">
			<image :src="isAll?'/static/checked.png':'/static/uncheck.png'" mode="" class="check-icon" style="margin-left: 30upx;" @click="checkAll()"></image>全选
			<view class="total">
				合计:<text class="total-price">￥{{totalPrice}}</text>
			</view>
			<view class="submit-btn" @click="submit">
				结算({{totalCount}})
			</view>
		</view>
	</view>
</template>

<script>
	import numberBox from '../../../components/number-box.vue'
	export default {
		data() {
			return {
				carts:[],
				isAll:true,
				totalPrice:0.00,
				totalCount:0
			};
		},
		onLoad:function(){
			this.getCarts();
		},
		methods:{
			submit:function(){
				if(this.carts.length==0){
					uni.showToast({
						title:"购物车是空的",
						icon:"none"
					})
				}else{
					var products=[];
					for(var i in this.carts){
						if(this.carts[i].checked){
							products.push(this.carts[i]);
						}
					}
					if(products.length==0){
						uni.showToast({
							title:"未选择商品",
							image:"../../../static/error.png",
						});
					}else{
						uni.setStorageSync("cart",products);
						uni.navigateTo({
							url:"/pages/product/confirm/confirm"
						})
					}
					
				}
			},
			checkCart:function(index){
				this.carts[index].checked=!this.carts[index].checked;
				this.getTotal();
				for(var i in this.carts){
					if(this.carts[i].checked==false){
						this.isAll=false;
						return;
					}
				}
				this.isAll=true;
				
			},
			checkAll:function(){
				this.isAll=!this.isAll;
				for(var i in this.carts){
					this.carts[i].checked=this.isAll
				}
				this.getTotal();
			},
			setCount:function(res) {
				console.log(res);
				this.carts[res.id].count=res.value;
				this.getTotal();
			},
			getCarts:function(){
				var that=this;
				uni.showLoading({
					title:"加载中",
				})
				that.ajax("/store/cart/",{
					token:uni.getStorageSync("token"),
				},function(res){
					that.carts=res.data.data;
					for(var i=0;i<that.carts.length;i++){
						that.carts[i].checked=true;
					}
					that.getTotal();
				});
			},
			deleteCart:function(index){
				var that=this;
				
				uni.showModal({
					title:"是否将该商品从购物车删除？",
					success:function(e){
						if(e.confirm){
							uni.showLoading({
								title:"请稍后"
							})
							that.ajax("/store/deleteCart/",{
								token:uni.getStorageSync("token"),
								id:that.carts[index].cid,
							},function(res){
								that.carts.splice(index,1);
								that.getTotal();
							});
						}
					}
				})
			},
			getTotal:function(){
				var price=0;
				var count=0;
				for(var i in this.carts){
					if(this.carts[i].checked){
						price+=this.carts[i].price*this.carts[i].count;
						count+=this.carts[i].count?this.carts[i].count:0;
					}
				}
				this.totalPrice=price;
				this.totalCount=count;
			},
		},
		computed:{
			
		},
		components: {
			numberBox
		},
	}
</script>

<style>
	.check-icon{
		width: 32upx;height: 32upx;margin-right: 20upx;
	}
	.item{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 206upx;
		padding: 20upx;
		position: relative;
	}
	.item-image{
		width: 202upx;
		height: 150upx;
		border-radius: 12upx;
		position: relative;
		z-index: 100;
	}
	.item-info{
		position: absolute;
		height: 134upx;
		left: 185upx;
		right: 0;
		top: 25upx;
		padding: 40upx 26upx 32upx 138upx;
		background: #ffffff;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:13upx 0upx 0upx 13upx;
	}
	.item-title{
		font-size: 28upx;
		display: flex;
		flex-direction: row;
	}
	.item-cart{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-content: flex-end;
		align-items: flex-end;
	}
	.weight{
		margin-left: 10upx;
		font-size: 20upx;
		line-height: 34upx;
		background: #45AA8C;
		border-radius: 8upx;
		display: inline-block;
		padding: 0upx 10upx;
		color: #ffffff;
	}
	.item-bottom{
		margin-top: 40upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item-price{
		flex: 1;
		font-size: 24upx;
		color: #ff340e;
		font-weight: 600;
	}
	.item-count{
		flex: 1;
		text-align: right;
		font-size: 22upx;
		color: #bcbcbc;
	}
	.bottom{
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100upx;
		font-size: 24upx;
		background: #ffffff;
		box-shadow:0px 2upx 22upx 0upx rgba(71,142,126,0.15);
	}
	.total{
		margin-left: 30upx;
		flex: 1;
		color: #4B4B4B;
	}
	.total-price{
		color:#FF7465;
		font-weight: 600;
		
	}
	.submit-btn{
		width:258upx;
		height:71upx;
		background:linear-gradient(141deg,rgba(17,153,126,1) 0%,rgba(110,206,146,1) 100%);
		border-radius:42upx;
		line-height: 71upx;
		text-align: center;
		font-size: 35upx;
		color: #ffffff;
		margin-right: 26upx;
	}
</style>
